[FE-112] Boundary Enterprise a11y audit- User details form #2977
+7
−3
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
10 tasks
venusang
force-pushed
the
fe-112-boundary-admin-a11y-user-deets
branch
from
a40d4ac to
334e7d6
Compare
ZedLi
reviewed
Aug 28, 2025
ZedLi
previously approved these changes
Aug 29, 2025
Collaborator
ZedLi
left a comment
ZedLi
left a comment
There was a problem hiding this comment.
Looks good! Thanks for the update
hashicc
previously approved these changes
Aug 29, 2025
Collaborator
hashicc
left a comment
hashicc
left a comment
There was a problem hiding this comment.
Thanks for helping us with our a11y!
cameronperera
previously approved these changes
Sep 2, 2025
venusang
dismissed stale reviews from cameronperera, hashicc, and ZedLi
via
2ec32be
ZedLi
requested changes
Sep 10, 2025
nikkipurcell
reviewed
Nov 5, 2025
| delete: Delete User | ||
| edit-details: | ||
| button-text: 'Edit User details' | ||
| aria-describedby: 'user-details' |
There was a problem hiding this comment.
change aria-describedby to 'edit-user-details' to match button text (if you need aria-describedby).
This adds edit user details translations so the User detail form submit button is a11y compliant ✅ Closes: FE-112
Per a11y audit, this changes the input fields to readonly instead of disabled. It also updates the submit button text so that it is context based and has an aria-label for screenreaders. ✅ Closes: FE-112
This moves the User detail action translation to resources/en-us.yaml since it is specific to the user resource and is not a generic form action. ✅ Closes: FE-112
This was not sending the aria-label down to the Edit Users detail button. However, taking a look further at Hds::Button, this component does not allow aria-label to be set unless it is an icon only button. With that said, this cleans up the translation structure and removes the aria-label translation and mark-up. ✅ Closes: FE-112
Since we cannot apply aria-label to an Hds::Button when it has text, we can alternatively apply the aria-describedby attribute instead. Its value must match the id of the form. With that said, a form id value was also added. ✅ Closes: FE-112
venusang
force-pushed
the
fe-112-boundary-admin-a11y-user-deets
branch
from
2ec32be to
ee255d4
Compare
This updates the translation to be more explicit to edit user details and removes the unnecessary aria at attribute in the form ✅ Closes: FE-112
ZedLi
reviewed
Dec 2, 2025
| {{yield to='edit'}} | ||
| {{else}} | ||
| <Hds::Button | ||
| aria-describedby={{@ariaDescribedBy}} |
Collaborator
There was a problem hiding this comment.
Where do we pass in @ariaDescribedBy now?
| delete: Delete User | ||
| edit-details: | ||
| button-text: 'Edit User details' | ||
| aria-describedby: 'edit-user-details' |
Collaborator
There was a problem hiding this comment.
I don't think we should have a translation for an aria-describedby
| {{#if (can 'save model' @model)}} | ||
| <form.actions | ||
| @enableEditText={{t 'actions.edit-form'}} | ||
| @enableEditText={{t 'resources.user.actions.edit-details.button-text'}} |
Collaborator
There was a problem hiding this comment.
I don't believe we need the extra aria-described by stuff since you've already modified the edit text itself to be more descriptive for everyone.
To be clear, I think we have 3 reasonable options here of which only one needs to get done:
- Do what you did here and just change the edit text itself to more descriptive
- Keep the edit button to just say
Edit Formbut add anaria-descriptionwith the translated string that saysEdit Form: Users. - Keep the edit button to just say
Edit Formbut add anaria-describedbywith the ID of the form title, in this case it would be the one here. We would need to add in our own ID for the title so it's not an auto-generated one so we can refer to it with thearia-describedby. We would also need to refactor to remove theDocLinkfrom the title element (and fix the CSS as well) since that content would also be read by the screen reader and instead probably put it in theBadgessection like this:
<@header.Title id="header-title">
{{t 'resources.user.title'}}
</@header.Title>
<@header.Badges>
<DocLink @doc='user' />
</@header.Badges>
Of the three, I think 1 and 2 is easiest but 3 is more convenient as a developer since you don't need to add a new translated string for every edit button, just the ID and refactor of the header. They're all fine at the end of the day though.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This updates the input fields on the User details page so that they are
readonlyinstead ofdisabled. Additionally it changes the edit button text fromEdit formtoEdit User detailsso that it is more descriptive. Lastly,aria-describedbywas also added to the button so that it is a11y compliant.🎟️ FE-112
Screenshots (if appropriate)
How to Test
Navigate to a User in the Users list. Verify that the input fields are readonly (you should be able to highlight the text with your mouse) and that the submit button reflects the text changes shown in the after screenshot.
Checklist
a11y-testslabel to run a11y audit tests if neededPCI review checklist
Examples of changes to security controls include using new access control methods, adding or removing logging pipelines, etc.